<template>
  <div>
    <!-- 工艺路线 -->
    <el-table
      v-loading="loading"
      border
      :data="productBomList"
      :row-key="getRowKeys"
      :reserve-selection="true"
      @current-change="handleCurrent"
      @row-dblclick="handleRowDbClick"
    >
      <el-table-column width="55">
        <template #default="scope">
          <el-radio
            v-model="selectedId"
            :disabled="optType =='view'"
            :label="scope.row.routeId"
            @change="handleRowChange(scope.row)"
          >{{ "" }}</el-radio>
        </template>
      </el-table-column>
      <el-table-column label="工艺路线编号" width="150" prop="routeCode" />
      <el-table-column label="工艺路线名称" prop="routeName" :show-overflow-tooltip="true" />
      <el-table-column label="工艺路线说明" :formatter="routeDesc" prop="routeDesc" :show-overflow-tooltip="true" />
      <el-table-column label="排产方式" :formatter="attr3" prop="attr3" :show-overflow-tooltip="true" />
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page-sizes="[20, 50, 100]"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { prorouteList } from '@/api/mes/pro/workorder'
export default {
  name: 'WorkorderItemList',
  dicts: ['mes_item_product'],
  props: {
    productId: undefined,
    workorderId: undefined,
    optType: undefined
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 工艺路线
      productBomList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 单位列表
      measureOptions: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        enableFlag: 'Y',
        itemId: null,
        workOrderId: null
      },
      // 选中数组
      selectedId: null,
      selectedRow: null
    }
  },
  watch: {
    // 产品id
    productId: {
      handler(val) {
        if (val) {
          this.getList(val, this.workorderId)
        } else if (val == null || val == undefined || val == '') {
          this.selectedRow = null
          this.selectedId = null,
          this.productBomList = []
          this.loading = false
        }
      },
      immediate: true,
      deep: true
    }
  },
  created() {
    // this.getList();
  },
  methods: {
    /** 查询生产工单BOM组成列表 */
    getList(val, workorderId) {
      this.loading = true
      this.queryParams.itemId = val
      this.queryParams.workOrderId = workorderId
      prorouteList(this.queryParams).then(response => {
        this.productBomList = response.rows
        this.total = response.total
        this.loading = false
        var arr = this.productBomList.filter(item => {
          if (item.isChecked == 1) {
            return item.routeId
          }
        })
        this.selectedId = arr[0].routeId
        // 有工艺默认选中
        if (this.selectedId) {
          this.selectedRow = arr[0]
          this.$emit('onSelected', this.selectedRow)
        }
      })
    },
    /**
    * @getRowKeys 设置回显的函数
    * @parmas row 当前行的数据，需要一个唯一的标识来标记是哪一个被选中了
    */
    getRowKeys(row) {
      return row.routeCode
    },
    attr3(row) {
      console.log
      // attr4 == 0?'快速排产':'顺序排产'
      if (row.attr3 == 0) {
        return '快速排产'
      } else if (row.attr3 == 1) {
        return '顺序排产'
      } else {
        return '--'
      }
    },
    routeDesc(row) {
      if (row.routeDesc) {
        return row.routeDesc
      } else {
        return '--'
      }
    },
    handleCurrent(row) {
      if (this.optType == 'view') {
        return
      }
      if (row) {
        this.selectedId = row.routeId
        this.selectedRow = row
        this.$emit('onSelected', this.selectedRow)
      }
    },
    // 单选选中数据
    handleRowChange(row) {
      if (row) {
        this.selectedId = row.routeId
        this.selectedRow = row
        this.$emit('onSelected', this.selectedRow)
      }
    },
    // 行双击选中
    handleRowDbClick(row) {
      if (this.optType == 'view') {
        return
      }
      if (row) {
        this.selectedId = row.routeId
        this.selectedRow = row
        this.$emit('onSelected', this.selectedRow)
      }
    }
  }
}
</script>
